<template>
	<!-- NH网信指挥中心 -->
	<dv-full-screen-container class="command-center">
		<dv-border-box-11 title="NH网信指挥中心">
			<div class="content">
				<left-content class="left"/>
				<center-content class="center"/>
				<right-content class="right"/>
			</div>
		</dv-border-box-11>
	</dv-full-screen-container>
</template>

<script>
import leftContent from './components/layout/left-content/index';
import centerContent from './components/layout/center-content/index';
import rightContent from './components/layout/right-content/index';

export default {
	name: 'command-center',
	components: {
		leftContent,
		centerContent,
		rightContent
	},
	data () {
		return {};
	}
};
</script>

<style lang="less" type="text/less" scoped>
	.command-center {
		background: url('~@/assets/images/keji.jpg');
		background-size: 100%;
		height: 100%;

		.content {
			display: flex;
			justify-content: space-around;
			width: 100%;
			height: 100%;

			.left,
			.center,
			.right {
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				width: 33%;
				margin-top: .5rem /* 40/80 */;

				/deep/ .border-box-content {
					display: flex;
					justify-content: space-around;

					div {
						display: flex;
						justify-content: center;
						align-items: center;
					}
				}
			}

			.left {
				margin-left: .1875rem /* 15/80 */;
			}

			.right {
				margin-right: .1875rem /* 15/80 */;
			}
		}
	}
</style>
